<template>
  <view>
    <u-navbar title="分享"></u-navbar>
    <view class="share-wrapper">
      <view class="image">
        <u-image width="100%" height="100%" src="@/pageCourse/static/images/share_bg.png"></u-image>
      </view>
      <view class="teacher-info u-flex" v-if="!$u.test.empty(shareData)">
        <view class="avatar u-flex">
          <u-avatar size="70" :src="userInfo.avatar_url"></u-avatar>
        </view>
        <view class="content">
          <view class="name u-line-1">{{ userInfo.nick_name }}</view>
          <view class="desc u-line-1">邀您一起学习</view>
        </view>
      </view>
      <view class="course-info" v-if="!$u.test.empty(shareData)">
        <edu-image
          width="100%"
          height="237rpx"
          border-radius="10rpx"
          :src="shareData.cover_url"
        ></edu-image>
        <view class="name u-line-1">{{ shareData.course_title }}</view>
        <view class="u-flex">
          <view class="price">
            {{ shareData.course_price | formatCurrency }}
          </view>
          <view class="scribing">
            {{ shareData.scribing_price | formatCurrency }}
          </view>
        </view>
      </view>
      <view class="code" v-if="!$u.test.empty(shareData)">
        <tki-qrcode
          ref="qrcode"
          :val="shareData.share_url_h5"
          :size="270"
          :loadMake="true"
          :onval="true"
          :showLoading="false"
        />
      </view>
      <view class="mhm-name u-line-1">本课程由{{ shareData.mhm_title }}提供</view>
    </view>
    <view class="profit" v-if="!$u.test.empty(shareData.max_profit)">
      每成功邀请一名用户预计最多收入
      <text>{{ shareData.max_profit | formatCurrency }}</text>
    </view>
    <view class="share-btn-placeholder"></view>
    <view class="share-btn-wrap" v-if="!$u.test.empty(shareData.open_device)">
      <!-- #ifdef MP -->
      <button class="u-reset-button share-btn" type="default" open-type="share">
        <u-image
          width="80rpx"
          height="80rpx"
          src="@/pageCourse/static/images/share_link_icon.png"
        ></u-image>
      </button>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view
        class="item"
        v-if="shareData.open_device.includes('h5')"
        @click="copyLink(shareData.share_url_h5)"
      >
        <u-image
          width="80rpx"
          height="80rpx"
          src="@/pageCourse/static/images/share_link_icon.png"
        ></u-image>
        <text>分享链接</text>
      </view>
      <!-- #endif -->

      <!-- #ifdef APP-PLUS -->
      <view class="item" v-if="shareData.open_device.includes('app')" @click="uniShare">
        <u-image
          width="80rpx"
          height="80rpx"
          src="@/pageCourse/static/images/share_download_icon.png"
        ></u-image>
        <text>分享</text>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import uniCopy from '@/utils/xb-copy/uni-copy.js'
import tkiQrcode from './components/tki-qrcode/tki-qrcode.vue'
// #ifdef APP-PLUS
import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js'
const uniShare = new UniShare()
// #endif
import { mapGetters } from 'vuex'
export default {
  components: { tkiQrcode },
  data() {
    return {
      shareType: 0, // 分享类型【1：课程；2：资讯；11：拼团课程；12：砍价课程；】
      sourseId: 0, // id
      options: {},
      shareData: {},
      promotionId: 0,
    }
  },
  onLoad(options) {
    if (options.hasOwnProperty('promotion')) {
      this.promotionId = options.promotion
    }
    this.shareType = options.type
    this.sourseId = options.id
    this.getDetailsInfo()
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/getUserInfo',
    }),
  },
  onBackPress({ from }) {
    if (from === 'navigateBack') {
      // #ifdef APP-PLUS
      this.$nextTick(() => {
        uniShare.hide()
      })
      return uniShare.isShow
      // #endif
      // #ifndef APP-PLUS
      return false
      // #endif
    }
  },
  methods: {
    getDetailsInfo() {
      this.$edu.api
        .getShareInfo({
          type: this.shareType,
          id: this.sourseId,
          promotion: this.promotionId,
        })
        .then((res) => {
          this.shareData = res.data
          this.onMpShare()
        })
    },
    //将要复制的内容传进去
    copyLink(val) {
      uniCopy({
        content: val,
        success: (res) => {
          this.$u.toast(res)
        },
        error: (err) => {
          this.$u.toast(err)
        },
      })
    },
    // 覆盖原生的小程序分享，右上角胶囊
    onMpShare() {
      /* #ifdef MP */
      let query = {
        id: 0,
        share_code: this.shareData.share_code,
      }
      let path = ''
      if (this.shareType == 1) {
        query.id = this.sourseId
        path = '/pageCourse/course/details'
      } else if (this.shareType == 11) {
        query.id = this.promotionId
        path = '/pageCourse/course/promotion/pintuan'
      } else if (this.shareType == 12) {
        query.id = this.promotionId
        path = '/pageCourse/course/promotion/bargain'
      }
      this.$u.mpShare = {
        title: this.shareData.course_title,
        path: path + this.$u.queryParams(query),
        imageUrl: this.shareData.cover_url,
      }
      /* #endif */
    },
    uniShare() {
      // #ifdef APP-PLUS
      uniShare.show(
        {
          content: {
            //公共的分享参数配置  类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
            type: 0,
            href: this.shareData.share_url_h5,
            title: this.shareData.course_title,
            summary: this.shareData.course_title,
            imageUrl: this.shareData.cover_url,
          },
          menus: [
            {
              img: '/static/images/login_icon_wechat.png',
              text: '微信好友',
              share: {
                provider: 'weixin',
                scene: 'WXSceneSession',
              },
            },
            {
              img: '/static/images/login_icon_wechat.png',
              text: '微信朋友圈',
              share: {
                provider: 'weixin',
                scene: 'WXSceneTimeline',
              },
            },
            {
              img: '/static/images/login_icon_weibo.png',
              text: '微博',
              share: {
                provider: 'sinaweibo',
              },
            },
            {
              img: '/static/images/login_icon_qq.png',
              text: 'QQ',
              share: {
                provider: 'qq',
                type: 2,
              },
            },
          ],
          cancelText: '取消分享',
        },
        (e) => {}
      )
      // #endif
    },
  },
}
</script>
<style lang="scss" scoped>
.share-wrapper {
  position: relative;
  width: 550rpx;
  height: 880rpx;
  margin: 24rpx auto 0;
  padding: 20rpx 65rpx 0;
  .image {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .teacher-info {
    position: relative;
    z-index: 2;
    .avatar {
      border: 2rpx solid #ffffff;
      border-radius: 100%;
      margin-right: 15rpx;
    }
    .name,
    .desc {
      color: #ffffff;
    }
    .name {
      font-weight: 500;
      font-size: 26rpx;
      max-width: 390rpx;
    }
    .desc {
      font-size: 20rpx;
    }
  }
  .course-info {
    margin-top: 38rpx;
    position: relative;
    z-index: 2;
    .name {
      margin-top: 14rpx;
      margin-bottom: 8rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: $edu-main-color;
    }
    .price {
      font-size: 30rpx;
      font-weight: bold;
      color: $edu-price-color;
    }
    .scribing {
      text-decoration: line-through;
      color: #b7bac1;
      font-size: 22rpx;
      margin-left: 6rpx;
      font-weight: bold;
    }
  }
  .code {
    margin-top: 18rpx;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    .tki-qrcode {
      display: flex;
    }
  }
  .mhm-name {
    width: 54%;
    position: absolute;
    z-index: 2;
    left: calc(50% - 27%);
    bottom: 15rpx;
    margin-top: 108rpx;
    font-size: 20rpx;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
  }
}
.profit {
  margin: 26rpx auto 0;
  width: 572rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  font-weight: 400;
  color: #5191ff;
  background-image: url('@/pageCourse/static/images/income_bg.png');
  background-size: 572rpx 50rpx;
  text {
    font-size: 24rpx;
    font-weight: 400;
    color: $edu-price-color;
  }
}
.share-btn-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #ffffff;
  border-radius: 28rpx 28rpx 0 0;
  .share-btn {
    border-radius: 50%;
  }
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    text {
      margin-top: 24rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-main-color;
    }
  }
}
.share-btn-placeholder {
  height: 200rpx;
  margin-top: 24rpx;
}
</style>
